<template>
  <div class="page-container">
     <!--面包屑导航-->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销中心</el-breadcrumb-item>
        <el-breadcrumb-item>其他类促销</el-breadcrumb-item>
        <el-breadcrumb-item>预售</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--搜索条件+操作按钮栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-row class="times">
              <el-form-item label="活动日期：" prop="startTime" class="times">
                <el-date-picker
                  v-model="filters.startTime"
                  :picker-options="startTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  format="yyyy-MM-dd HH:mm:ss"
                  placeholder="开始时间"
                  class="input_postion w211"
                  clearable
                ></el-date-picker>
              </el-form-item>
              <span class="times-to">-</span>
              <el-form-item prop="endTime">
                <el-date-picker
                  v-model="filters.endTime"
                  :picker-options="endTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  format="yyyy-MM-dd HH:mm:ss"
                  placeholder="结束时间"
                  class="input_postion w211"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="活动类型：" prop="frontPromType">
                <el-select v-model="filters.frontPromType" placeholder="全部" clearable>
                  <el-option
                    v-for="item in frontPromTypes"
                    :key="item.type"
                    :label="item.name"
                    :value="item.type"
                  ></el-option>
                </el-select>
              </el-form-item>
        </el-row>
        <el-row class="search-input">
          <el-form-item label="创建人：" prop="creatorNameForSearch">
            <el-input clearable v-model="filters.creatorNameForSearch" placeholder="创建人"  maxlength="80"></el-input>
          </el-form-item>
          <el-form-item label="活动名称：" prop="promName">
            <el-input clearable v-model="filters.promName" placeholder="活动名称" maxlength="80"></el-input>
          </el-form-item>
          <el-form-item label="活动ID：" prop="promotionCode">
            <el-input clearable v-model="filters.promotionCode" placeholder="活动ID" maxlength="80"></el-input>
          </el-form-item>
        </el-row>
        <!--操作按钮-->
        <el-row  class="search-button">
          <el-form-item>
            <kt-button :label="$t('action.reset')" class="resetButton" @click="resetForm('filters')" icon="el-icon-refresh"/>
          </el-form-item>
          <!--查询-->
          <el-form-item>
            <kt-button
              icon="el-icon-search"
              label="搜索"
              @click="getPromotionList()"
              class="searchButton"
            />
          </el-form-item>
          <el-form-item>
            <kt-button label="创建活动" @click="createPage()"  class="searchButton" />
          </el-form-item>
        </el-row>
      </el-form>
    </div>

    <!--标签页栏-->
    <div class="tab-container">
      <el-tabs v-model="activeName">
        <el-tab-pane
          v-for="item in tabMapOptions"
          :key="item.key"
          :label="item.label"
          :name="item.key"
        >
            <tab-pane
              v-if="activeName==item.key"
              :type="item.key"
              ref="child"
              :parentFilters="filters"
              v-on:SecondSell="SecondSell"
            />
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
import { front_prom_types, chanel_codes } from "@/market/dict/marketDict";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { darkmagenta } from "color-name";
import tabPane from "./components/TabPanePresell";
export default {
  name: "Tab",
  components: {
    tabPane,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      channelOption:[],
      flag: false,
      form: {
        region: ""
      },
      tabMapOptions: [
        { label: "全部", key: "0" },
        { label: "进行中", key: "5" },
        { label: "已结束", key: "8" },
        { label: "已过期", key: "6" },
        { label: "已关闭", key: "7" },
        { label: "未开始", key: "3" },
        { label: "待提交", key: "1" },
        { label: "待审核", key: "2" },
        { label: "审核未通过", key: "4" },
        { label: "活动草稿", key: "9" }
      ],

      activeName: "0",
      createdTimes: 0,
      dataForm: {
        id: null,
        promType: 9, //预售
        templateName: null,
        start: 1,
        limit: 10
      },
      dataTotal: 0,
      useTempDialogVisible: false,
      tableData: [],
      size: "small",
      align: "center",
      loading: false,
      templateLoading: false,
      filters: {
        promName: null,
        promotionCode: null,
        id: "",
        promType: 9, //预售
        frontPromType: "",
        frontPromMode: "",
        frontMoneyPayTimeStart: "",
        frontMoneyPayTimeEnd: "",
        tailMoneyPayTimeStart: "",
        tailMoneyPayTimeEnd: "",
        isRefundFrontMoney: "",
        textarea: "",
        sendGoodsTime: "",
        activityType: "",
        creatorNameForSearch: "",
        startTime: "",
        endTime: "",
        type: "",
        t: "sysConfig",
        queryname: "",
        promotionCode:'',
      },
      frontPromTypes: this.getFrntPromType(),
      // 活动时间校验
      startTime: {
        disabledDate: time => {
          if (this.filters.endTime) {
            return time.getTime() > new Date(this.filters.endTime).getTime();
          }
        }
      },
      endTime: {
        disabledDate: time => {
          if (this.filters.startTime) {
            return (
              time.getTime() <
              new Date(this.filters.startTime).getTime() - 8.64e7 + 1
            );
          }
        }
      }
    };
  },
  methods: {
    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },
    getFrntPromType: function(row, column, cellValue, index) {
      return front_prom_types.filter(e => {
        return e.code == "presell_front_prom_type";
      });
    },

    currentChange(start) {
      this.dataForm.start = start;
      this.tempPageQuery();
    },
    sizeChange(limit) {
      this.dataForm.start = 1;
      this.dataForm.limit = limit;
      this.tempPageQuery();
    },

    resetForm(formName) {

      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
      }
      this.getPromotionList();
    },
    createPage() {
      // this.$router.push("/CreatePromotion3");
      this.$router.push("/presellPromotionEvent" + "?auth=1&active=1");
    },
    getPromotionList() {
      this.$refs.child[0].listQuery.pageNo = 1;
      this.$refs.child[0].getList();
    },
    changeMerchant() {
      let this_ = this;
      this.utils.request.queryStoreList(
        { start: 1, limit: 10000000, merchantId: this.filters.merchantId },
        function(res) {
          if (res.code == "0000") {
            res.data.rows.forEach(item => {
              //,{'storeId':'0','label':'张小二bbc店铺'},{'storeId':'1','label':'张小二的京东店'}
              let store = {};
              store.storeId = item.id;
              store.label = item.storeName;
              this_.storeIds.push(store);
            });
          }
        }
      );
    },
    SecondSell() {
      this.flag = true;
    }
  },
  watch: {
    activeName(val) {
      this.$router.push(`${this.$route.path}?tab=${val}`);
    }
  },
  created() {
    const tab = this.$route.query.tab;
    if (tab) {
      this.activeName = tab;
    }
  },
  mounted() {}
};
</script>

<style scoped lang="scss">
.page-container {
  overflow: hidden;
  .type {
    display: flex;
    align-items: center;
  }
  .type p {
    text-align: right;
    margin-right: 20px;
    width: 120px;
  }
  .reset {
    background-color: #fff;
    color: #409eff;
  }
}

/deep/ .el-tabs--card>.el-tabs__header .el-tabs__item:first-child{
  border-left: 1px solid #9B9DA3 !important;
  &.is-active {
    border-color: #0090FF !important;
  }
}
.search-input{
  .times{
    .w211{
      width: 211px !important;
      /deep/ .el-input__inner{
        width: 211px !important;
      }
    }
  }
}
</style>
